{include file="public/mobileheader"}
<style>
    body{
        padding-bottom: 3em;
    }
    .mui-icon{
        display: inline-block;
        text-align: center;
    }
    .margin-top{
        margin-top: 12px;
    }

    .head-img {
        width: 50px;
        height: 50px;
        margin-right: 5px;
        border-radius: 2px;
    }
    .center-top{
        padding:45px 9px 2px;
        background: #00ccff;
    }
    .padding1{
        padding-top: 9px;
        color: white;
    }
    .padding2{
        padding-top: 5px;
    }

    .small-list{
        height: 70px;
        padding-buttom: 50px;
        text-align: center;
        box-shadow: 1px 2px 5px #999999;
    }
    .small-list>a{
        color: #00ccff;
        display: inline-block;
        width: 33.3%;
        background: white;
        height: inherit;
        text-align: center;
        padding-top: 9px;
        float: left;
    }
    .margin-top{
        margin-top: 1.5em;
        margin-bottom: 2em;
    }
    .border-right{
        border-right: 1px solid black;
    }
    .mui-btn-block{
        padding: 7px 0;
    }
</style>

<body>
    <header id="header" class="mui-bar mui-bar-transparent">
        <span class="mui-pull-left padding1">我的</span>
        <span class="mui-pull-right padding1">设置</span>
    </header>

    <div class="center-top">
        <a href="">
            <span class="mui-icon mui-icon-arrowright mui-pull-right"></span>
            <img class="mui-media-object mui-pull-left head-img" src="{$info['wxuser']['headimgurl']}">
            <div class="mui-media-body padding2">
                Hello, {$info['name']}
                <p class='mui-ellipsis'>账号：{$info['mobile']}</p>
            </div>
        </a>
    </div>

    <div class="small-list">
        <a href="">
            <div class="j-bar border-right">
                <div>
                    <span></span><br>
                    <span>账户余额</span>
                </div>
            </div>
        </a>
        <a href="">
            <div class="j-bar border-right">
                <div>
                    <span></span><br>
                    <span>我的订单</span>
                </div>
            </div>
        </a>
        <a href="">
            <div class="j-bar border-right">
                <div>
                    <span></span><br>
                    <span>我的订单</span>
                </div>
            </div>
        </a>
    </div>

    <div class="margin-top">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="{:url('my_agent/index')}" class="mui-navigate-right">
                    <span class="mui-badge mui-badge-purple">5</span>
                    我的代理
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-warning">5</span>
                    用户管理
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-warning">5</span>
                    拿货咨询
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-warning">5</span>
                    用户须知
                </a>
            </li>
        </ul>
    </div>

    <div class="margin-top">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="{:url('password')}" class="mui-navigate-right">
                    <span class="mui-badge mui-badge-purple">5</span>
                    修改密码
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-danger">15</span>
                    系统公告
                </a>
            </li>
        </ul>
    </div>
    <a href="{:url('login/logout')}" type="button" class="mui-btn mui-btn-warning mui-btn-block">退出登录</a>
    {include file="public/nav"}
</body>
{include file="public/mobilefooter"}

<script>
    //底部导航栏的高亮控制
    var nav = document.getElementsByClassName('active');
    nav[3].style.color = '#007aff';
</script>
</html>